<template>
  <div class="container">
    <!-- 智能搜索栏 -->
    <div
      :class="['search-bar', { 'fixed-search': isSearchFixed }]"
      :style="{ padding: isSearchFixed ? '10px 20px' : '20px 0' }"
    >
      <el-input
        v-model="searchKeyword"
        placeholder="搜索农产品..."
        class="search-input"
        clearable
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>

    <!-- 商品展示区域 -->
    <div class="goods-container">
      <el-row :gutter="20" justify="center" class="goods-row">
        <el-col
          v-for="product in filteredProducts"
          :key="product.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
          class="goods-col"
        >
          <el-card
            class="product-card"
            @click="goGoodsDetail(product.id)"
            shadow="hover"
            :body-style="{ padding: '15px' }"
          >
            <!-- 商品图片和内容 -->
            <div class="image-container">
              <img
                :src="product.image"
                :alt="product.name"
                class="product-image"
              />
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="price-section">
                <span class="price-label">特惠价</span>
                <span class="product-price">¥{{ product.price }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="filteredProducts.length === 0" class="no-result">
        未找到相关商品
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  image: string;
}

// 商品数据
const products: Product[] = [
  {
    id: 1,
    name: "新鲜苹果",
    description: "烟台红富士 脆甜多汁",
    price: 12.8,
    image: "/src/assets/images/apple.jpg", // 本地图片路径
  },
  {
    id: 2,
    name: "有机胡萝卜",
    description: "自然种植 无农药残留",
    price: 6.5,
    image: "https://example.com/carrot.jpg", // 外部图片示例
  },
  {
    id: 3,
    name: "农家土鸡蛋",
    description: "散养土鸡 营养丰富",
    price: 15.0,
    image: "/src/assets/images/egg.jpg",
  },
  {
    id: 4,
    name: "有机大米",
    description: "东北五常大米 5kg装",
    price: 68.0,
    image: "/src/assets/images/rice.jpg",
  },
  {
    id: 5,
    name: "高山绿茶",
    description: "明前特级 清香回甘",
    price: 98.0,
    image: "/src/assets/images/tea.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
  {
    id: 6,
    name: "精品牛肉",
    description: "内蒙古草原散养牛肉",
    price: 45.0,
    image: "/src/assets/images/beef.jpg",
  },
];
// 搜索相关
const searchKeyword = ref("");
const isSearchFixed = ref(false);
let lastScrollPosition = 0;

// 过滤商品
const filteredProducts = computed(() => {
  if (!searchKeyword.value) return products;
  const keyword = searchKeyword.value.toLowerCase();
  return products.filter(
    (p) =>
      p.name.toLowerCase().includes(keyword) ||
      p.description.toLowerCase().includes(keyword)
  );
});

// 跳转到商品详情页面
const goGoodsDetail = (id: number) => {
  // console.log(id);
  router.push({
    name: "goodsDetail",
    params: {
      id: id,
    },
  });
};

// 滚动处理
const handleScroll = () => {
  const currentPosition =
    window.pageYOffset || document.documentElement.scrollTop;
  const searchBarHeight =
    document.querySelector(".search-bar")?.clientHeight || 0;

  // 向下滚动超过搜索栏高度时固定
  isSearchFixed.value = currentPosition > searchBarHeight;

  // 控制过渡效果
  lastScrollPosition = currentPosition <= 0 ? 0 : currentPosition;

  // 检查是否滚动到底部
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // 触发分页查询事件
    console.log("触发底查询到更多商品");
  }
};

// 事件监听
onMounted(() => window.addEventListener("scroll", handleScroll));
onUnmounted(() => window.removeEventListener("scroll", handleScroll));

// 防抖搜索
const handleSearch = () => {
  // 可添加防抖逻辑
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
}

.search-bar {
  background: white;
  transition: all 0.3s ease;
  z-index: 1000;

  &.fixed-search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 20px !important;

    .search-input {
      max-width: 1200px;
      margin: 0 auto;
    }
  }
}

.search-input {
  transition: all 0.3s;
  border-radius: 24px;

  :deep(.el-input__wrapper) {
    border-radius: 24px;
    padding: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.goods-container {
  padding-top: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.no-result {
  text-align: center;
  color: #666;
  padding: 40px 0;
  font-size: 16px;
}

/* 保持原有的商品卡片样式 */
.goods-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .goods-row {
    margin: 0 -10px;
  }

  .goods-col {
    padding: 10px;
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);
    }
  }

  .product-card {
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    }
  }

  .image-container {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 8px;
  }

  .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }

  .product-info {
    padding: 15px 5px 5px;

    .product-name {
      color: #333;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .product-desc {
      color: #666;
      font-size: 12px;
      line-height: 1.4;
      height: 36px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .price-section {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price-label {
        background: #ffefe5;
        color: #ff5000;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
      }

      .product-price {
        color: #ff5000;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
</style>
